<template>
  <div class="home-page">
    <div class="swiper">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item, index) in swiperData" :key="index">
          <img v-lazy="item.img" width="100%" height="100%" alt="image" />
        </mt-swipe-item>
      </mt-swipe>
      <!-- 分类区域 -->
      <home-ul>
        <home-li v-for="(item, index) in categoryList" :key="index">
          <i :class="{
            iconfont: true,
            [item.className]: true
          }"></i>
          <router-link :to="{ name: item.routerName }">
            {{ item.title }}
          </router-link>
        </home-li>
      </home-ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  data () {
    return {
      categoryList: [{
        className: 'icon-xinwen',
        title: '新闻资讯',
        routerName: 'newsList',
      }, {
        className: 'icon-tuwen',
        title: '图文分享',
        routerName: 'imagesList',
      }, {
        className: 'icon-shangpin',
        title: '商品展示',
        routerName: 'goodsList',
      }, {
        className: 'icon-liuyan',
        title: '留言反馈',
        routerName: 'newsList',
      }, {
        className: 'icon-sousuo',
        title: '搜索资讯',
        routerName: 'newsList',
      }, {
        className: 'icon-lianxi',
        title: '联系我们',
        routerName: 'newsList',
      }]
    }
  },
  methods: {
    ...mapActions('home/homeStore', ['getSwiper']),
  },
  computed: {
    ...mapState('home/homeStore', ['swiperData'])
  },
  created () {
    this.getSwiper()
  },
};
</script>

<style scoped lang="less">
  .home-page {
    .swiper {
      height: 200px;
    }
    i {
      width: 50px;
      line-height: 50px;
      border-radius: 50%;
      text-align: center;
      font-size: 28px;
      color: #fff;
      margin-bottom: 5px;
    }
    .icon-xinwen {
      background-color: #06a588;
    }
    .icon-tuwen {
      background-color: #a30652;
    }
    .icon-shangpin {
      background-color: #139ac6;
    }
    .icon-liuyan {
      background-color: #67c9ea;
    }
    .icon-sousuo {
      background-color: #a86603;
    }
    .icon-lianxi {
      background-color: #ed9a1e;
    }
  }
</style>